<template>
  <div class="search-container">
    <div class="search-top">
      <!-- 搜索框  @click="toSearch"-->
      <SearchShop @throRealfu="throReal" v-model:keyword="keyword"></SearchShop>
    </div>


    <!-- 实时搜索 -->
    <div class="search-realTime" v-if="isShow">
      <ul class="realTime-ul">
        <li v-for="(realitem, index) in realTime" @click="toSearchShop(index, realitem)">
          <span>{{ realitem }}</span>
          <i><van-icon name="arrow" /></i>
        </li>
      </ul>
    </div>

    <div v-else>
      <!-- 搜索历史记录 -->
      <div class="search-hot" v-if="historyListShow?.length > 0">
        <p>历史记录
          <i class="icon" @click="deleHis"><van-icon name="delete" /></i>
        </p>
        <div class="search-hot-container">
          <div class="search-hot-info" v-for="(hisitem, index) in historyListShow" @click="toSearchShop(index, hisitem)">
            {{ hisitem }}
          </div>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="search-bottom">
        <div class="search-hot">
          <p>热门搜索</p>
          <div class="search-hot-container">
            <div class="search-hot-info" :class="idx == index ? 'active' : ''" v-for="(hot, index) in hotSearch"
              @click="toShop(index, hot)">
              {{ hot.keyword }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import searchApi, { type hotKeywordVOListModel, } from '@/api/search';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
import SearchShop from '@/components/Search-shop/index.vue'

const router = useRouter();

//热搜数据
const hotSearch = ref<hotKeywordVOListModel[]>([])
const idx = ref(0);
const keyword = ref('')
let _stat_search = 'hot'
//控制显示隐藏
const isShow = ref(false)
const realTime = ref<string[]>([]) //实时数据
const historyListShow = ref(JSON.parse(localStorage.getItem('history')!) ? JSON.parse(localStorage.getItem('history')!) : [])//历史记录



//删除历史记录
function deleHis() {
  historyListShow.value = []
  localStorage.removeItem('history')
}



//更改显示隐藏
// function checkIsshow(show: boolean) {
//   isShow.value = !show
// }
//生命周期函数
onMounted(() => {
  getHotSearch();
})

//获取热搜数据
async function getHotSearch() {
  try {
    let result = await searchApi.reqGetHotSearch();
    // console.log(result)
    hotSearch.value = result.hotKeywordVOList
    keyword.value = result.defaultKeyword.keyword
    // console.log(keyword.value)
    // console.log(result.defaultKeyword.keyword);

  } catch (error) {
    console.log(error)
  }
}

//热门搜索
function toShop(index: number, hot: hotKeywordVOListModel) {
  //修改样式
  idx.value = index;
  //获取搜索内容
  keyword.value = hot.keyword
  //点击hot搜索
  _stat_search = 'hot'
  //更改用户点击热门
  //路由跳转
  router.push({
    path: `/toshop`,
    query: {
      keyword: keyword.value,
      _stat_search,
    }
  })
}

////历史搜索|实时搜索
function toSearchShop(index: number, realitem: string) {
  //存历史记录
  let his = []
  // console.log(111);
  if (historyListShow.value.length > 9) {
    historyListShow.value.pop()
  }
  console.log(historyListShow.value.includes(realitem))
  if (!historyListShow.value.includes(realitem)) {
    his.push(realitem, ...historyListShow.value)
  } else {
    his.push(...historyListShow.value)
  }
  localStorage.setItem('history', JSON.stringify(his))
  //修改样式
  idx.value = index;
  //获取搜索内容
  keyword.value = realitem
  //点击hot搜索
  _stat_search = 'autoComplete'
  //更改用户点击热门
  //路由跳转
  router.push({
    path: `/toshop`,
    query: {
      keyword: keyword.value,
      _stat_search,
    }
  })
}


//输入实时数据
async function getRealTimeData() {

  console.log(keyword.value);
  //组装数据
  let keywordPrefix = keyword.value
  // console.log(keywordPrefix);
  if (keywordPrefix) {
    try {
      let result = await searchApi.reqGetsearchrealtime(keywordPrefix)
      // console.log(result);
      realTime.value = result
      isShow.value = true
    } catch (error) {
      console.log(error)
    }
  } else {
    realTime.value = []
    isShow.value = false
  }
}

//输入节流
function throReal() {
  throttle(getRealTimeData, 500)()
}

//节流
var flag = true // 记录状态
function throttle(fn: () => any, delay: number) {
  return function () {
    if (flag) { // 如果是true代表没有点击过,生成定时器,等待秒执行
      setTimeout(() => {
        fn()
        flag = true;
      }, delay)
    }
    flag = false
  }
}



//回车


</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.search-top {
  background: #fff;
}

.search-bottom {
  width: 100%;
  background: #fff;
  padding-top: 20px;
}

.search-container {
  //搜索框

  //实时数据
  .search-realTime {
    width: 100%;
    background: #fff;
    z-index: 3;

    .realTime-ul {
      width: 345px;
      margin: 0 auto;

      li {
        width: 100%;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        float: left;
        border-bottom: 1px solid #bbb;

        i {
          float: right;
          margin-right: 10px;
          margin-top: 5px;
        }
      }

      &::after {
        content: '';
        clear: both;
        margin: 0;
        padding: 0;
      }
    }
  }

  //历史记录
  .search-hot {
    width: 345px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding-top: 10px;

    p {
      font-size: 14px;
      color: #555;

      .icon {
        float: right;
        font-size: 16px;
      }
    }

    //内容
    .search-hot-container {
      margin-top: 10px;

      .search-hot-info {
        display: inline-block;
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #444;
        padding: 0 5px;
        margin: 5px;
        border-radius: 10%;
        color: #555;
      }

      .active {
        border: 1px solid red;
      }
    }
  }

  //热门搜索
  .search-hot {
    width: 345px;
    margin: 0 auto;
    margin-bottom: 20px;
    padding-bottom: 20px;

    p {
      font-size: 14px;
      color: #555;
    }

    //内容
    .search-hot-container {
      margin-top: 10px;

      .search-hot-info {
        display: inline-block;
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #444;
        padding: 0 5px;
        margin: 5px;
        border-radius: 10%;
        color: #555;
      }

      .active {
        border: 1px solid red;
      }
    }
  }
}
</style>